<template>
	<s-layout title="结果" :bgStyle="{
		color:'#F6F6F6'
	}">
	<view class="result ss-p-x-20 ss-p-t-30">
		<view class="result-title">{{state.type === 'group' ? '群聊' : '联系人'}}</view>
		<view class="result-item ss-flex justify-start align-center" :class="[index !== state.list.length - 1 ? 'bb' : '']" v-for="(item,index) in state.list" @click="jump(item)" :key="index">
			<template v-if="state.type === 'group'">
				<image class="result-image ss-m-r-24" :src="cdn(item.FaceUrl) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'" mode="aspectFill"></image>
				<view class="result-name">{{item.Name}}</view>
			</template>
			<template v-else>
				<image class="result-image ss-m-r-24" :src="cdn(item.last_msg.Tag_Profile_IM_Image)" mode="aspectFill"></image>
				<view class="result-name">{{item.last_msg.Tag_Profile_IM_Nick}}</view>
			</template>
		</view>
	</view>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {cdn} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	
	const iMMyInfo = computed(() => $store().userInfo);
	
	const state = reactive({
		type:'',
		keyword:'',
		list:[]
	})
	
	onLoad((options)=>{
		if (options) {
			let obj = {
				'recently': '联系人',
				'contacts': '联系人',
				'group': '群聊'
			}
			uni.setNavigationBarTitle({
				title:obj[options.type]
			})
			state.type = options.type
			state.keyword = options.search
			getData()
		}
	})
	
	const jump = (value) => {
		if (state.type === 'recently' || state.type === 'contacts') {
			$store().getChatInfo(`C2C${value.account}`, 'chat', value.account)
		} else {
			$store().getChatInfo(`GROUP${value.GroupId}`, 'group', value.GroupId)
		}
	}
	
	const getData = () => {
		uni.request({
			url: 'https://im-beta.shisan-xi.work/api/settings/searchDetail',
			method: 'GET',
			data: {
				keyword: state.keyword,
				im_id: iMMyInfo.value.userID,
				type:state.type === 'group' ? 'group' : 'friend'
			},
			success(result) {
				state.list = result.data.data
			}
		});
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.result {
		background-color: #fff;
		.result-title {
			font-weight: 350;
			font-size: 24rpx;
			color: #939393;
		}
		
		.result-item {
			width: 100%;
			height: 104rpx;
			
			.result-image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 8rpx;
			}
			
			.result-name {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			
		}
	}
	
	
	.bb {
		border-bottom: 1rpx solid #EDEDED;
	}
</style>